<template>
    <div>
        <el-row>
            <el-col :span="4">
                <div class="fun-box">

                    <div class="fun-item" :class="queryObj.readStatus === 'N' ? 'select':''">
                        <div class="item" @click="changeReadStatus('N')">
                            <d2-icon :name="queryObj.readStatus === 'N' ? 'square':'square-o'" class="fun-icon" />
                            <span class="fun-title">未读信息</span>
                            <span class="fun-count" v-if="queryObj.readStatus === 'N'">{{page.count}}</span>
                        </div>
                    </div>
                    <div class="fun-item-sub">
                        <div class="sub" v-for="(item,index) in msgTypes" :key="index"
                            :class="queryObj.msgType === item.value ? 'select':''" @click="changeMsgType(item)">
                            <d2-icon :name="queryObj.msgType === item.value ? 'circle':'circle-o'" class="fun-icon" />
                            <span class="fun-title">{{item.label}}</span>
                            <span class="fun-count" v-if="queryObj.msgType === item.value">{{page.count}}</span>
                        </div>
                    </div>
                    <div class="fun-item" :class="queryObj.readStatus === 'Y' ? 'select':''">
                        <div class="item" @click="changeReadStatus('Y')">
                            <d2-icon :name="queryObj.readStatus === 'Y' ? 'square':'square-o'" class="fun-icon" />
                            <span class="fun-title">已读信息</span>
                            <span class="fun-count" v-if="queryObj.readStatus === 'Y'">{{page.count}}</span>
                        </div>
                    </div>
                    <div class="fun-item" :class="queryObj.delStatus === 'Y' ? 'select':''">
                        <div class="item" @click="chageDelStatus('Y')">
                            <d2-icon :name="queryObj.delStatus === 'Y' ? 'square':'square-o'" class="fun-icon" />
                            <span class="fun-title">删除信息</span>
                            <span class="fun-count" v-if="queryObj.delStatus === 'Y'">{{page.count}}</span>
                        </div>
                    </div>
                </div>

            </el-col>
            <el-col :span="20">
                <div class="query-table">
                    <div class="table-headerc">
                        <div>
                            消息列表
                        </div>
                        <div>
                            <el-radio-group style="margin-right:10px;" v-model="msgLevel"
                                @change="changeMsgLevel(msgLevel)" size="mini">
                                <el-radio-button label="全部">
                                </el-radio-button>
                                <el-radio-button :label="item.label" v-for="(item,index) in msgLevels" :key="index">
                                </el-radio-button>
                            </el-radio-group>
                            <el-radio-group v-model="msgTime" @change="changeMsgTime(msgTime)" size="mini">
                                <el-radio-button label="全部"></el-radio-button>
                                <el-radio-button label="今天"></el-radio-button>
                                <el-radio-button label="近7天"></el-radio-button>
                                <el-radio-button label="近30天"></el-radio-button>
                            </el-radio-group>
                        </div>
                    </div>
                    <div class="table-list">
                        <!-- 表格表体 -->
                        <ec-table :data="tableData" border style="width: 100%" :max-height="350" :height="350"
                            v-loading="loading">
                            <el-table-column type="selection" header-align="center" align="center" width="50">
                            </el-table-column>
                            <el-table-column prop="msgContent" header-align="left" align="left" show-overflow-tooltip
                                label="消息内容">
                                <template slot-scope="scope">
                                    <el-link type="primary" @click="showDetail(scope.row.id)">
                                        {{scope.row.msgContent}}
                                    </el-link>
                                </template>
                            </el-table-column>
                            <el-table-column prop="msgLevelDesc" header-align="center" align="center" width="150"
                                show-overflow-tooltip label="消息级别">
                            </el-table-column>
                            <el-table-column prop="msgTypeDesc" header-align="center" align="center" width="150"
                                show-overflow-tooltip label="消息类型">
                            </el-table-column>
                            <el-table-column prop="sendName" header-align="center" align="center" width="150"
                                show-overflow-tooltip label="发送人">
                            </el-table-column>
                            <el-table-column prop="createdTime" header-align="center" align="center" width="200"
                                show-overflow-tooltip label="发送时间">
                            </el-table-column>
                        </ec-table>

                    </div>
                </div>
                <div class="table-page clearfix">
                    <ec-pagination :page="page" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    </ec-pagination>
                </div>

                <div class="message-info" v-show="Object.keys(msgInfo).length > 0">
                    <div class="message-header">
                        <div>
                            <span>发送人：</span>
                            <span>{{msgInfo.sendName}}</span>
                        </div>
                        <div>
                            <span>发送时间：</span>
                            <span>{{msgInfo.createdTime}}</span>
                        </div>
                        <div>
                            <span>消息类型：</span>
                            <span>{{msgInfo.msgTypeDesc}}</span>
                        </div>
                        <div>
                            <span>消息级别：</span>
                            <span>{{msgInfo.msgLevelDesc}}</span>
                        </div>

                        <div>
                            <span>消息标记：</span>
                            <el-checkbox v-model="readstatus" @change="readMsg(msgInfo.id)"
                                :disabled="readstatus == 'Y'">已读</el-checkbox>
                            <el-checkbox v-model="delstatus" @change="delMsg(msgInfo.id)" :disabled="delstatus == 'Y'">
                                删除</el-checkbox>
                        </div>
                    </div>
                    <div class="message-file" v-show="msgInfo.files != null && msgInfo.files.length>0">
                        <span>附件：</span>
                        <div class="file-list">
                            <div class="file" v-for="(item,index) in msgInfo.files" :key="index" @click="download(item)"
                                title="点击下载">
                                <div class="fileimg">
                                    <!-- <img :src="item.fileUrl" alt="图标"> -->
                                    <d2-icon name="file" style="font-size:30px;color:rgb(173, 175, 179);"></d2-icon>
                                </div>
                                <div class="filedesc">
                                    <div>{{item.fileName}}</div>
                                    <div>{{item.fileSize}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="message-content"><span>消息内容：</span>{{msgInfo.msgContent}}</div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import * as dictService from '@/api/bdms/dict'
    import * as messageinfoService from '@/api/chat/messageinfo'
    import * as messageSeeRecordService from '@/api/chat/messageseerecord'
    import * as fileService from '@/api/file/file'
    export default {
        data() {
            return {
                selectItem: '',
                page: {
                    page: 1,
                    limit: 10,
                    total: 0,
                    count: 0
                },
                queryObj: {
                    msgType: '',
                    msgLevel: '',
                    msgTime: '',
                    readStatus: 'N',
                    delStatus: ''
                },
                msgInfo: {},
                msgTime: '全部',
                readstatus: false,
                delstatus: false,
                msgLevel: '全部',
                tableData: [],
                msgLevels: [],
                msgTypes: [],
                loading: false,
            }
        },
        mounted() {
            this.getDataTable()
            this.getMsgType()
            this.getMsgLevel()
        },
        methods: {
            // 获取数据列表
            getDataTable() {
                let that = this
                this.loading = true
                this.clearMsgInfo();
                let query = {
                    page: this.page.page,
                    limit: this.page.limit,
                    msgType: this.queryObj.msgType,
                    msgLevel: this.queryObj.msgLevel,
                    msgTime: this.queryObj.msgTime,
                    readStatus: this.queryObj.readStatus,
                    delStatus: this.queryObj.delStatus
                };
                messageinfoService.getuserMsgList(query).then(data => {
                    this.loading = false
                    if (data != null && data.list.length > 0) {
                        this.tableData = data.list;
                        this.page.total = data.totalCount
                        this.page.count = data.totalCount

                        if (this.tableData != null && this.tableData.length > 0) {
                            this.$store.commit('d2admin/inmail/SET_INMAIL_LIST', this.tableData)
                        }
                    } else {
                        this.tableData = []
                        this.page.total = 0
                        this.page.count = 0
                        this.$store.commit('d2admin/inmail/SET_INMAIL_LIST', this.tableData)
                    }
                }).catch(error => {
                    that.loading = false
                });
            },
            getMsgType() {
                dictService.getValues('msg_type').then(data => {
                    this.msgTypes = data;
                })
            },
            getMsgLevel() {
                dictService.getValues('msg_level').then(data => {
                    this.msgLevels = data;
                })
            },
            // 加载信息
            showDetail(id) {
                messageinfoService.getmessageinfoinfo(id).then(data => {
                    this.msgInfo = data
                    this.readstatus = data.readStatus == 'Y' ? true : false
                    this.delstatus = data.delStatus == 'Y' ? true : false
                });
            },
            // 切换消息类型
            changeMsgType(obj) {
                if (obj != null) {
                    this.queryObj.msgType = obj.value
                    this.queryObj.readStatus = 'N'
                    this.queryObj.delStatus = ''
                    this.getDataTable()
                    this.clearMsgInfo();
                }
            },
            // 切换读取状态
            changeReadStatus(status) {
                this.queryObj.readStatus = status
                this.queryObj.delStatus = ''
                this.queryObj.msgType = ''
                this.getDataTable()
                this.clearMsgInfo();
            },
            // 切换删除状态
            chageDelStatus(status) {
                this.queryObj.delStatus = status
                this.queryObj.readStatus = ''
                this.queryObj.msgType = ''
                this.getDataTable()
                this.clearMsgInfo();
            },
            // 切换消息时间范围
            changeMsgTime(value) {
                if (value == '全部') {
                    this.queryObj.msgTime = ''
                    this.msgTime = '全部'
                } 
                if (value == '今天') {
                    this.queryObj.msgTime = '1'
                }
                if (value == '近7天') {
                    this.queryObj.msgTime = '7'
                }
                if (value == '近30天') {
                    this.queryObj.msgTime = '30'
                }
                this.getDataTable()
                this.clearMsgInfo();
            },
            //切换页数
            handleSizeChange(val) {
                this.page.limit = val;
                this.getDataTable();
                this.clearMsgInfo();
            },
            clearMsgInfo() {
                this.msgInfo = {}
            },
            readMsg(id) {
                if (id) {
                    messageSeeRecordService.readMessage(id).then(() => {
                        this.$store.commit('d2admin/inmail/DEL_MSG', id)
                        this.$message.success("操作成功！")
                        this.readstatus = 'Y'
                    });
                }
            },
            delMsg(id) {
                if (id) {
                    messageSeeRecordService.delMessage(id).then(() => {
                        this.$store.commit('d2admin/inmail/DEL_MSG', id)
                        this.$message.success("操作成功！")
                        this.delstatus = 'Y'
                    });
                }
            },
            // 切换级别
            changeMsgLevel(val) {
                if (val == '全部') {
                    this.queryObj.msgLevel = ''
                    this.msgLevel = '全部'
                } else {
                    this.msgLevels.forEach(item => {
                        if (item.label == val) {
                            this.queryObj.msgLevel = item.value
                        }
                    })
                }
                this.getDataTable()
                this.clearMsgInfo();
            },
            // 下载文件方法
            download(file) {
                if (file) {
                    let params = "";
                    params = params + "fileIds=" + file.pkFile + "&"
                    params = params + "zip="
                    fileService.download(params).then(data => {
                        this.downloadFile(data, file.fileName, file.mimeType)
                    })
                } else {
                    this.$message.error("文件参数错误！")
                }
            },
            // 下载文件
            downloadFile(data, fileName, fileType = 'application/octet-stream') {
                if (!data) {
                    return
                }
                let url = window.URL.createObjectURL(new Blob([data], {
                    type: fileType
                }))
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', fileName)
                document.body.appendChild(link)
                link.click()
            },
            // 翻页
            handleCurrentChange(val) {
                this.page.page = val;
                this.getDataTable();
                this.clearMsgInfo();
            },
        }
    }
</script>

<style scoped>
    .fun-box {
        padding: 15px;
        box-sizing: border-box;
        background: #f5f5f5;
        height: 100vh;
    }

    .fun-item {
        padding: 15px 10px;
        cursor: pointer;
        user-select: none;
        border-bottom: 1px solid #eee;
        border-radius: 5px;
    }

    .fun-count {
        float: right;
        padding: 5px;
        border-radius: 50%;
        background: #60bdf4;
        font-size: 10px;
        height: 10px;
        min-width: 10px;
        text-align: center;
        line-height: 10px;
    }

    .fun-item:hover,
    .sub:hover {
        background: #409EFF;
        color: #fff;
    }

    .select {
        background: #409EFF;
        color: #fff;
    }

    .fun-item-sub {
        padding: 5px 0px 5px 15px;
        cursor: pointer;
        user-select: none;
        /* border-top: 1px solid #eee; */
    }

    .sub {
        padding: 10px;
        border-radius: 5px;
        margin: 5px 0;
    }

    .fun-icon {
        margin: 0 10px;
    }

    .fun-title {
        font-size: 14px;
    }

    .query-table {
        /* height: 50vh; */
        /* background: #d0f0f0; */
    }

    .message-info {
        height: 50vh;
        background: #fefefe;
        border: 1px solid #EBEEF5;
        /* border-top: transparent; */
    }

    .table-headerc {
        height: 48px;
        line-height: 48px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 0px 10px;
        box-sizing: border-box;
        border-left: 1px solid #EBEEF5;
        border-right: 1px solid #EBEEF5;
    }

    .table-page {
        height: 32px;
    }

    .message-header {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 10px;
        border-bottom: 1px solid #EBEEF5;
        font-size: 14px;
    }

    .message-file {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 10px;
        border-bottom: 1px solid #EBEEF5;
        font-size: 14px;
    }

    .message-header>div {
        min-width: 100px;
        font-size: 14px;
        margin-right: 30px;
    }

    .message-file>span,
    .message-content>span {
        display: inline-block;
        width: 80px;
        font-size: 14px;
        color: #999;
    }

    .message-header>div>span:nth-of-type(1) {
        display: inline-block;
        color: #999;
        width: 80px;
    }

    .file-list {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .file {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        font-size: 10px;
        border: 1px solid rgb(206, 205, 205);
        border-radius: 4px;
        margin-bottom: 5px;
        padding: 5px;
        margin-right: 5px;
        cursor: pointer;
        user-select: none;
    }

    .filedesc {
        margin-left: 20px;
        min-width: 80px;
        text-align: right;
    }

    .filedesc div:first-child {
        height: 18px;
        line-height: 18px;
        font-size: 14px;
    }

    .filedesc div:last-child {
        height: 12px;
        line-height: 12px;
    }

    .message-content {
        padding: 10px;
    }
</style>